<template>
  <el-collapse-item name="1">
    <template #title>
      <h2>Wi-Fi 配置</h2>
    </template>
    <!-- <div style="padding:20px"> -->
    <h3>连接WiFi</h3>
    <el-row :gutter="20">
      <el-col :span="5">
        <b>Wi-Fi名称</b>
      </el-col>
      <el-col :span="14">
        <el-autocomplete
          id="wifi_join_ssid"
          clearable
          placeholder="请输入SSID"
          v-model="wifi_join.ssid"
          :fetch-suggestions="querySearch"
          @select="handleSelect"
        >
          <template #default="{ item }">
            <div class="scan_item">
              {{ item.ssid }}
              <span>{{ item.rssi }}</span>
            </div>
          </template>
        </el-autocomplete>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" :loading="wifi_join.scan" @click="wifi_scan">
          <span>扫描</span>
        </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :span="5">
        <b>密码</b>
      </el-col>
      <el-col :span="14">
        <el-input v-model="wifi_join.passwd" placeholder="请输入密码" clearable />
      </el-col>
    </el-row>
    <el-alert
      v-if="show_wifi_join_tips"
      title="当前仅有终端开启/URL为终端IP, 此时更换 WiFi 会导致连接中断, 无法获取连接状态"
      type="warning"
      show-icon
    />
    <el-alert
      v-if="show_wifi_join_tips"
      title="连接成功需要手动更换页面 IP 地址"
      type="warning"
      show-icon
    />
    <el-alert
      v-if="show_wifi_join_tips"
      title="连接失败后将会重新连接上次成功的 WiFi"
      type="info"
      show-icon
    />
    <el-button
      type="primary"
      style="margin-top: 10px"
      :disabled="!wifi_join.change"
      @click="wifi_connect"
      >连接</el-button
    >

    <br />
    <el-divider></el-divider>
    <el-descriptions title="Wi-Fi 终端(STA)信息" :column="1" border style="padding: 10px">
      <ElDescriptionsItem label="信号强度" label-width="100px"
        >{{ sta_config.signal }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="SSID">{{ sta_config.ssid }}</ElDescriptionsItem>
      <ElDescriptionsItem label="MAC">{{ sta_config.mac }}</ElDescriptionsItem>
      <ElDescriptionsItem label="IP">{{ sta_config.ip }}</ElDescriptionsItem>
      <ElDescriptionsItem label="掩码">{{ sta_config.mask }}</ElDescriptionsItem>
      <ElDescriptionsItem label="网关">{{ sta_config.gateway }}</ElDescriptionsItem>
      <ElDescriptionsItem label="DNS">{{ sta_config.dns }}</ElDescriptionsItem>
    </el-descriptions>
    <!-- </div> -->
  </el-collapse-item>
</template>

<script setup lang="ts">
import Bus from "~/utils/bus";
import store from "~/utils/store";
import { ElMessage } from "element-plus";
import "element-plus/es/components/message/style/css";
const config = toRef(store);

interface wifi_scan_result {
  ssid: string;
  rssi: number;
}

const sta_config = computed(
  () =>
    config.value?.wifi?.sta || {
      signal: 0,
      ssid: "未连接",
      mac: "未连接",
      ip: "未连接",
      gateway: "未连接",
      mask: "未连接",
      dns: "未连接",
    }
);

const wifi_scan_result: wifi_scan_result[] = [];
const wifi_join = ref({
  scan: false,
  change: false,
  ssid: "",
  passwd: "",
});
const show_wifi_join_tips = ref(false);

let handle: number = -1;
const get_msg = (result) => {
  if (result.api == "wifi_scan") {
    wifi_scan_result.splice(0, wifi_scan_result.length);
    wifi_scan_result.push(...result.data);
    wifi_join.value.scan = false;
    document.getElementById("wifi_join_ssid").focus();
    ElMessage.success("WiFi 扫描成功 共有" + wifi_scan_result.length + "个");
    if (handle != -1) clearInterval(handle);
  }
};

onBeforeUnmount(() => {
  Bus.off("update:msg", get_msg);
});

onBeforeMount(() => {
  Bus.on("update:msg", get_msg);
});

watchEffect(() => {
  if (sta_config.value.ip == window.location.hostname) show_wifi_join_tips.value = true;
  if (wifi_join.value.ssid.length != 0 && wifi_join.value.passwd.length >= 6)
    wifi_join.value.change = true;
});

const wifi_scan = () => {
  if (!wifi_join.value.scan) {
    wifi_join.value.scan = true;
    Bus.emit("push.msg", { api: "wifi_scan" });
    let count = 0;
    handle = setInterval(() => {
      if (++count >= 60) {
        clearInterval(handle);
        handle = -1;
        ElMessage.error("WiFi 扫描失败");
        wifi_join.value.scan = false;
      }
    }, 500);
  }
};

const querySearch = (queryString: string, cb) => {
  cb(wifi_scan_result);
};

const handleSelect = (item: wifi_scan_result) => {
  console.log(item);
  wifi_join.value.ssid = item.ssid;
};

const wifi_connect = () => {
  wifi_join.value.change = false;
  Bus.emit("push.msg", {
    api: "wifi_connect",
    data: { ssid: wifi_join.value.ssid, password: wifi_join.value.passwd },
  });
};
</script>

<style scoped>
.scan_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
